import { defineComponent, h, ref } from 'vue'
const tools = defineComponent({
  setup(props, { slots,expose }) {
    const submit = () => {
      console.log('submit:tools')
    }
    expose({
      submit
    })
    return () => (
      <>
        <h3>tools</h3>
      </>
    )
  },
})

const settings = defineComponent({
  setup(props, { slots,expose }) {
    const submit = () => {
      console.log('submit:settings')
    }
    expose({
      submit
    })
    return () => (
      <>
        <h3>settings</h3>
      </>
    )
  },
})

const staticView = defineComponent({
  setup(props, { slots,expose }) {
    const submit = () => {
      console.log('submit:staticView')
    }
    expose({
      submit
    })
    return () => (
      <>
        <h3>staticView</h3>
      </>
    )
  },
})

const preferences = defineComponent({
  setup(props, { slots,expose }) {
    const submit = () => {
      console.log('submit:preferences')
    }
    expose({
       submit
    })
    return () => (
      <>
        <h3>偏好</h3>
      </>
    )
  },
})
export default defineComponent({
  name: 'settings-view',
  props: {},
  setup(props, { slots, emit }) {
    const componentMap = {
      tools,
      settings,
      staticView,
      preferences,
    }
    const currentRef = ref<typeof tools | null>(null)
    const currentComponent = ref<keyof typeof componentMap>('tools')
    const toggleHandle = (item: keyof typeof componentMap) => {
      currentComponent.value = item
      currentRef.value?.submit()
    }
    return () => (
      <div class={'settings-layout__container'}>
        <h1>settings</h1>
        {Object.keys(componentMap).map((item) => (
          <>
            <button onClick={toggleHandle.bind(this,item as keyof typeof componentMap)}>
              {item}
            </button>
          </>
        ))}
        {h(componentMap[currentComponent.value],{ref:currentRef},{})}
      </div>
    )
  },
})
